<template>
  <div class="login">
    <div class="login-content">
      <div class="title">欢迎使用两年半系统</div>

      <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item label="账号" name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]">
          <a-input v-model:value="formState.username" placeholder="请输入账号"/>
        </a-form-item>

        <a-form-item label="密码" name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]">
          <a-input-password v-model:value="formState.password" placeholder="请输入密码"/>
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 16 }">
          <a-checkbox v-model:checked="formState.remember" style="color: #fff;">请勾选xxxx协议</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 10, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { LoginInterface } from "../interface/login/index";

let formState = reactive<LoginInterface>({ username: "", password: "", remember: false });

const onFinish = () => {

}

const onFinishFailed = () => {

}
</script>

<style scoped>
::v-deep .ant-form-item-label > label {
  color: #fff;
}
.login {
  width: 100%;
  height: 100vh;
  background-color: #7f7ff3;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-content {
  width: 600px;
  height: 300px;
  color: #fff;
}

.title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 30px;
}
</style>